<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论区</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/remark.css">
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <!--导航栏-->
    <div class="nav">
        <img id = "logo" src="img/logo.png" alt="">
        <span class="title">我的博客系统</span>
        <!--用于占位-->
        <span class="spacer"></span>
        <!--按钮-->
        <a href="blog_list.html"><img src="img/home.png" alt="">主页</a>
        <a href="blog_edit.html"><img src="img/edit.png" alt="">写博客</a>
        <a href="logout"><img src="img/zhuxiao.png" alt="">注销</a>
     </div>

     <div class="container">
        <div class="remark-list">

        </div>
        <div class="remark">
                <input type="text" name="content" id="content">
                <button onclick="post_ajax()" id="button" >评论</button>
        </div>
     </div>
     <script>
        
        function post_ajax() {
            //获取blogId的值
            let url = location.href;
            let urlStr = url.split('?')[1];
            let firstParam = urlStr.split('=')[1];

            $.ajax({
                type:'post',
                url:'remark',
                data:{'blogId': firstParam, 'content': $('#content').val()},
                success:function(body) {
                    window.location.reload();
                },
                error:function(body) {
                    window.location.href="login.html";
                }
            });
        }
        
        function get_ajax() {
            $.ajax({
                type:'get',
                url:'remark'+location.search,
                success:function(body) {
                    let remarkList = document.querySelector('.remark-list');
                    for(let remark of body) {
                        //创建row
                        let row = document.createElement('div');
                        row.className = 'row';
                        //创建img
                        let img = document.createElement('img');
                        img.src = "img/profile_pic.jpg";
                        row.appendChild(img);
                        //创建username
                        let username = document.createElement('div');
                        username.className = 'username';
                        username.innerHTML = remark.username + "对你说：";
                        row.appendChild(username);
                        //创建content
                        let content = document.createElement('div');
                        content.className = 'content';
                        content.innerHTML = remark.content;
                        row.appendChild(content);
                        //创建remarkTime
                        let remarkTime = document.createElement('div');
                        remarkTime.className = 'remarkTime';
                        remarkTime.innerHTML = remark.remarkTime;
                        row.append(remarkTime);

                        remarkList.appendChild(row)
                    }
                },
                error:function(body) {
                    window.location.href="login.html";
                }
            })
        }

        get_ajax();
     </script>
</body>
</html>